<template>
	<view class="chat-info">
		<!-- 用户列表 -->
		<view class="users">
			<view class="users__item" v-for="item in users">
				<image class="avatar" :src="item.avatar" mode="aspectFit"></image>
				<text class="username">瑶瑶</text>
			</view>
			<!-- 添加 -->
			<view class="addUser" @tap="addUser"></view>
			<view class="allUser" v-if="users.length>19">
				<text>查看更多群成员</text>
			</view>
		</view>
		<!-- 查找聊天内容 -->
		<Option title="查找聊天内容" right="arrow" @submit="test"/>
		<!--消息免打扰 置顶 -->
		<view class="message__user">
			<Option title="消息免打扰" right="switch"  @change="test"/>
			<Option title="置顶" right="switch"  @change="test"/>
		</view>
		<!-- 清空聊天记录 -->
		<Option title="清空聊天记录"  @submit="test"/>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import Option from '@/components/common/option.vue'
	
	const users = ref([{
		id:"23qwe",
		avatar:"../../static/logo.png",
		username:"瑶瑶"
	},
	{
		id:"23qwe",
		avatar:"../../static/logo.png",
		username:"瑶瑶"
	},{
		id:"23qwe",
		avatar:"../../static/logo.png",
		username:"瑶瑶"
	}])
	
	/**
	 * 加群
	 */
	function addUser(){
		console.log("未开发")
	}
	/**
	 * 无功能 测试用的
	 */
	function test(){
		console.log("test")
	}
</script>

<style lang="scss">
	.users{
		background-color: white;
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		// gap: 10upx;
		&__item{
			// width: 90upx;
			width: 20%;
			gap: 5upx;
			margin: 10upx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.avatar {
			width: 90upx;
			height: 90upx;
			border-radius: 5upx;
		}
		.username{
			font-size: 20upx;
			color: #a1a1a1;
		}
		.addUser{
			margin: 10upx 0;
			// width: 20%;
			width: 90upx;
			margin-left: 20upx;
			height: 90upx;
			border: 3upx dashed #ccc;
			position: relative;
			border-radius: 5upx;
			&::before,&::after{
				content: "";
				position: absolute;
				width: 50%;
				height: 5upx;
				background-color: #ccc;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			&::before{
				transform: translate(-50%,-50%) rotate(90deg);
			}
		}
		.allUser{
			width: 100%;
			display: flex;
			padding: 24upx 0;
			color: #Ccc;
			font-size: 30upx;
			align-items: center;
			justify-content: center;
		}
	}
	
	
	

.message__user{
	.query-chat{
		margin: 0;
		border-bottom: 1upx solid #f5f5f5;
	}
}
</style>
